<template>
  <div class="app-container">
    <div class="header">
      <div class="word">
        <div class="w1">
          收藏管理
        </div>
        <div class="w2">
          在收藏管理中你可以查看收藏商品，收藏id地址等基本信息，同时还可以实现查询收藏品，删除收藏品等功能，提供一套可行的收藏管理方案
        </div>
        <div class="w2">
          收藏管理系统是后台系统中重要的一环,它可以为我们提供用户收藏的信息，为进一步销售做准备
        </div>
      </div>
      <img class="imgDri"
           src="../../static/u=1054382444,2183855695&fm=253&fmt=auto&app=138&f=PNG.webp">
    </div>
    <div class="index">
      <el-table :data="mes"
                style="width: 100%">
        <el-table-column prop="productName"
                         label="商品名" />
        <el-table-column prop="productPrice"
                         label="商品价格" />
        <el-table-column prop="productDesc"
                         label="商品描述" />
        <el-table-column prop="gmtCreate"
                         label="收藏时间" />
        <el-table-column prop="carStatus"
                         label="操作">
          <template slot-scope="scope">
            <el-button type="text"
                       style="color:red;"
                       :disabled="mes[scope.$index].isDelshow"
                       @click="saleDel(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination :page-size="5"
                       layout="prev, pager, next, jumper"
                       :total="total"
                       :current-page="pageNum"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script>
import { getCollectionPage, deleteCollection } from '@/api/mall/collections'
export default {
  name: 'Comment',
  data () {
    return {
      saleId: '',
      mes: [],
      dialogTableVisible: false,
      formLabelWidth: '100px',
      dialogFormVisible: false,
      pageSize: 10,
      pageNum:1,
      select: '',
      searchInf: '',
      input3: '',
      page: 1,
      total:0
    }
  },
  async mounted () {
    this.load()
  },
  methods: {
    deleteHandle (index) {
      deleteCollection(this.mes[index].collectionId).then((response) => {
        if (response.statusCode == 20000) {
          this.load()
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '发生错误，修改失败',
            type: 'warning'
          })
        }
      })
    },
    load(){
      getCollectionPage({
        pageNum:this.pageNum,
        pageSize:this.pageSize,
      }).then((response) => {
        this.mes = response.data.records
        for (let i = 0; i < this.mes.length; i++) {
          this.$set(this.mes[i], 'isShow', false)
          this.$set(this.mes[i], 'isDelShow', false)
        }
        this.total = response.data.total
      })
    },
    handleCurrentChange (val) {
      this.page = val
      this.load()
    },
  }
}
</script>

<style lang="scss" scoped>
.qrcode-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header {
  width: 100%;
  height: 350px;
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;
}

.form {
  display: flex;
  flex-wrap: wrap;
}

.sel {
  width: 310px;
  display: flex;
  justify-content: right;
  align-content: center;
}

.sel2 {
  width: 240px;
}

.page {
  width: 100%;
  display: flex;
  justify-content: right;
}

.imgDri {
  height: 300px;
  width: 400px;
}

.item {
}

.w1 {
  height: 80px;
  font-size: 25px;
  font-weight: 350;
}

.w2 {
  height: 50px;
  font-size: 15px;
  font-weight: 250;
}

.searchHead {
  display: flex;
  justify-content: space-between;
}

.searchIuput {
  width: 350px;
}

.sel3 {
  width: 100px;
}
</style>
